<script setup lang="ts">
import { useDark, useECharts } from "@pureadmin/utils";
import ChartLine from "./components/ChartLine.vue";
import SysInfoCard from "./components/SysInfoCard.vue";
defineOptions({
  name: "Welcome"
});
</script>

<template>
  <div class="welcome-container">
    <!-- 注册 -->
    <el-row :gutter="10">
      <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header flex flex-wrap justify-between">
              <span class="card-header_title">今日注册</span>
              <el-tag type="success">日</el-tag>
            </div>
          </template>
          <div class="text-4xl">0</div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header flex flex-wrap justify-between">
              <span class="card-header_title">昨日注册</span>
              <el-tag type="primary">日</el-tag>
            </div>
          </template>
          <div class="text-4xl">0</div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header flex flex-wrap justify-between">
              <span class="card-header_title">总注册</span>
              <el-tag type="danger">总</el-tag>
            </div>
          </template>
          <div class="text-4xl">0</div>
        </el-card>
      </el-col>
    </el-row>
    <!--  订单  -->
    <el-row :gutter="10">
      <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header flex flex-wrap justify-between">
              <span class="card-header_title">待发货订单</span>
            </div>
          </template>
          <div class="text-4xl">0</div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header flex flex-wrap justify-between">
              <span class="card-header_title">待收货订单</span>
            </div>
          </template>
          <div class="text-4xl">0</div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header flex flex-wrap justify-between">
              <span class="card-header_title">已完成订单</span>
            </div>
          </template>
          <div class="text-4xl">0</div>
        </el-card>
      </el-col>
    </el-row>
    <!--  充值  -->
    <el-row :gutter="10">
      <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header flex flex-wrap justify-between">
              <span class="card-header_title">今日充值数额</span>
              <el-tag type="success">今日</el-tag>
            </div>
          </template>
          <div class="text-4xl">￥0</div>
          <template #footer>
            <div class="card-footer flex flex-wrap justify-between">
              <span class="card-footer_title">当日订单数</span>
              <span>0</span>
            </div>
          </template>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header flex flex-wrap justify-between">
              <span class="card-header_title">昨日充值数额</span>
              <el-tag type="primary">昨日</el-tag>
            </div>
          </template>
          <div class="text-4xl">￥0</div>
          <template #footer>
            <div class="card-footer flex flex-wrap justify-between">
              <span class="card-footer_title">昨日订单数</span>
              <span>0</span>
            </div>
          </template>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header flex flex-wrap justify-between">
              <span class="card-header_title">总充值数额</span>
              <el-tag type="danger">总数</el-tag>
            </div>
          </template>
          <div class="text-4xl">￥0</div>
          <template #footer>
            <div class="card-footer flex flex-wrap justify-between">
              <span class="card-footer_title">总订单数</span>
              <span>0</span>
            </div>
          </template>
        </el-card>
      </el-col>
    </el-row>
    <!--  虚拟充值  -->
    <el-row :gutter="10">
      <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header flex flex-wrap justify-between">
              <span class="card-header_title">虚拟今日充值数额</span>
              <el-tag type="success">今日</el-tag>
            </div>
          </template>
          <div class="text-4xl">￥0</div>
          <template #footer>
            <div class="card-footer flex flex-wrap justify-between">
              <span class="card-footer_title">虚拟当日订单数</span>
              <span>0</span>
            </div>
          </template>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header flex flex-wrap justify-between">
              <span class="card-header_title">虚拟昨日充值数额</span>
              <el-tag type="primary">昨日</el-tag>
            </div>
          </template>
          <div class="text-4xl">￥0</div>
          <template #footer>
            <div class="card-footer flex flex-wrap justify-between">
              <span class="card-footer_title">虚拟昨日订单数</span>
              <span>0</span>
            </div>
          </template>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header flex flex-wrap justify-between">
              <span class="card-header_title">虚拟总充值数额</span>
              <el-tag type="danger">总数</el-tag>
            </div>
          </template>
          <div class="text-4xl">￥0</div>
          <template #footer>
            <div class="card-footer flex flex-wrap justify-between">
              <span class="card-footer_title">虚拟总订单数</span>
              <span>0</span>
            </div>
          </template>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="24">
        <ChartLine />
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="24">
        <SysInfoCard />
      </el-col>
    </el-row>
  </div>
</template>
<style lang="scss" scoped>
.welcome-container {
  .el-col {
    margin-bottom: 10px;
    .el-card {
      .card-header,
      .card-footer {
        &_title {
          font-size: 0.8rem;
          color: #666;
        }
      }
    }
  }
}
</style>
